<template>
  <kk-container :showLoading="showLoading" :refresherEnabled="false">
    <view class="mine-container">
      <image class="imgBg" src="@/static/images/home/home_top_bg.png"></image>
      <!--顶部个人信息栏-->
      <TopPersonalInfo class="topInfo" />
      <view class="section">
        <view class="section-header">常用功能</view>
        <view v-if="menuList && menuList.length > 0">
          <view v-for="(value, index) in menuList" :key="index">
            <Cell
              :value="value"
              :isShowLine="index < menuList.length - 1"
              :isShowArrow="value.url ? true : false"
            ></Cell>
          </view>
        </view>
      </view>
      <view class="logoutBg" @tap="handleLogout">
        <view class="logoutBg-text">退出登录</view>
      </view>
    </view>
  </kk-container>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import TopPersonalInfo from "./components/topPersonalInfo.vue";
import Cell from "./components/cell.vue";
import {
  getUserLoginPhone,
  saveQrCodeUrl,
  getQrCodeUrl,
  getQrCodeUrlIsExpire,
  getUserInfo,
} from "@/utils/storageUtil";

import { jumpLoginPage } from "@/utils/util";
const evnMode = import.meta.env.MODE;

import { useUserStore } from "@/store";
const userStore = useUserStore();
const { requestUserInfo } = userStore;

import * as KKIndexApi from "@/api/index";
import * as KKLoginApi from "@/api/login";

const wxOpenid = ref("");
const wxOpenIdRequest = ref(false);

const phone = computed(() => {
  const mobile = getUserLoginPhone();
  return mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
});

const menuList = computed(() => {
  const mobile = getUserLoginPhone().replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
  let phoneItem = {
    name: "登录手机号",
    icon: "icon_my_phone",
    url: "",
    value: mobile,
  };
  let productItem = {
    name: "产品动态",
    icon: "icon_my_product",
    url: "/pagesA/productNews/index",
  };
  // let messageItem = {
  //   name: "消息通知",
  //   icon: "icon_my_message",
  //   url: "/pagesA/message/notification",
  //   badge: 100,
  // };
  let wxAccountObj = {
    name: "关注公众号",
    icon: "icon_my_wx",
    url: "followOfficialAccount",
  };
  let messageTestObj = {
    name: "公众号消息模拟测试",
    icon: "icon_my_wx",
    url: "/pages/mine/messageTest",
  };
  let menuList = [];
  if (wxOpenIdRequest.value && !wxOpenid.value) {
    menuList = [phoneItem, wxAccountObj, productItem];
  } else {
    menuList = [phoneItem, productItem];
  }
  if (evnMode !== "production") {
    //正式不加载测试入口
    menuList.push(messageTestObj);
  }
  return menuList;
});

onLoad(() => {});
onShow(() => {
  uni.showTabBar();
  getWoaOpenId();
  updateUserInfo();
});

// 获取公众号openid
const getWoaOpenId = async () => {
  let adminId = getUserInfo().adminUserId || "";
  if (!adminId) {
    wxOpenIdRequest.value = true;
    wxOpenid.value = "";
    return;
  }
  const data = await KKIndexApi.getWoaOpenId({ adminId }).catch((e) => {});
  if (data && data.data && data.data.openId) {
    wxOpenid.value = data.data.openId || "";
  } else {
    wxOpenid.value = "";
  }
  wxOpenIdRequest.value = true;
  if (!wxOpenid.value) {
    getMyQrCode();
  }
};

// 获取我的公众号二维码
const getMyQrCode = async () => {
  if (getQrCodeUrl() && !getQrCodeUrlIsExpire()) {
    return;
  }
  const data = await KKIndexApi.getWoaQrCodeProt().catch((e) => {});
  if (data && data.data && data.data.url) {
    saveQrCodeUrl(data.data.url || "");
  }
};

const updateUserInfo = async () => {
  await requestUserInfo().catch(() => {});
};

// 退出登录
const handleLogout = () => {
  const content = "确定退出登录吗？";
  uni.showModal({
    title: "提示",
    content: content,
    cancelText: "取消",
    confirmText: "确定",
    success: function (res) {
      if (res.confirm) {
        userLogout();
      }
    },
  });
};

const showLoading = ref(false);
const userLogout = async () => {
  showLoading.value = true;
  const data = await KKLoginApi.logoutProt().catch((e) => {
    showLoading.value = false;
  });
  showLoading.value = false;
  if (data && Number(data.code) === 10000) {
    jumpLoginPage();
  }
};
</script>

<style lang="scss" scoped>
.mine-container {
  width: 100%;
  height: 100%;
  .imgBg {
    position: relative;
    width: 100vw;
    height: 450rpx;
    z-index: -1;
  }

  .topInfo {
    position: relative;
    height: 120rpx;
    bottom: 274rpx;
  }

  .section {
    margin-left: 24rpx;
    margin-right: 24rpx;
    position: relative;
    top: -187rpx;
    width: calc(100% - 48rpx);
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    &-header {
      padding-left: 24rpx;
      padding-top: 40rpx;
      padding-bottom: 20rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #333333;
      line-height: 42rpx;
    }
  }

  .logoutBg {
    position: relative;
    margin-left: 24rpx;
    margin-right: 24rpx;
    width: calc(100% - 48rpx);
    top: -172rpx;
    background: linear-gradient(90deg, #3d8eff 0%, #743cff 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    &-text {
      height: 44px;
      border-radius: 22px;
      text-align: center;
      line-height: 44px;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      font-size: 32rpx;
    }
  }
}
</style>
